<template>
  <el-dialog v-if="dialogShow" v-model="dialogShow" title="编辑参数" width="1000px">
    <div v-loading="loading" class="content">
      <div class="block-left">
        <el-scrollbar class="param-scrollbar">
          <div
            v-for="(item, index) in paramList"
            :key="'param-item' + index"
            class="param-item"
            :class="{ 'active-item': currentItem.label === item.label }"
            @click="handleClick(item)"
          >
            {{ item.label }}
          </div>
        </el-scrollbar>
      </div>
      <div class="block-right">
        <div v-if="currentItem.field_type === 'upload'" class="upload-block">
          <el-form :model="currentItem">
            <el-form-item prop="value" :label="currentItem.label">
              <div class="value-block">{{ currentItem.value }}</div>
            </el-form-item>
          </el-form>
        </div>
        <div v-else class="input-block">
          <el-form :model="currentItem">
            <el-form-item prop="value" :label="currentItem.label">
              <el-input v-model="currentItem.value" :disabled="disabled" style="width: 560px"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSure">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="EditParamsDialog" lang="ts">
import { publicParameterList, specificParameterList } from '@/api/loadProcessingAlgorithm/loadVersionManagement/index';
import flowable from '@/bpmn/assets/moddle/flowable';
import { asapGetParameterConfigPath, asapGetParameter } from '@/api/loadProcessingAlgorithm/loadTaskManagement/index';
const prop = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
});
const dialogShow = ref(false);
const taskInfo = ref({});
const loading = ref(false);
const paramList = ref([
  {
    field_id: 'cumulative_station_5_0',
    label: '累计站位',
    value: '',
    field_type: 'upload'
  },
  {
    field_id: 'origin_location_cw',
    label: '垂尾刚轴原点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'reverse_array_cw',
    label: '垂尾转换矩阵',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'origin_location_pwl',
    label: '左平尾刚轴原点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'reverse_array_pwl',
    label: '左平尾转换矩阵',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'origin_location_pwr',
    label: '右平尾刚轴原点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'reverse_array_pwr',
    label: '右平尾转换矩阵',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'origin_location_inner_jyl',
    label: '左机翼内刚轴原点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'reverse_array_inner_jyl',
    label: '左机翼内转换矩阵',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'origin_location_outer_jyl',
    label: '左机翼外刚轴原点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'reverse_array_outer_jyl',
    label: '左机翼外转换矩阵',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'origin_location_inner_jyr',
    label: '右机翼内刚轴原点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'reverse_array_inner_jyr',
    label: '右机翼内转换矩阵',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'origin_location_outer_jyr',
    label: '右机翼外刚轴原点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'reverse_array_outer_jyr',
    label: '右机翼外转换矩阵',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'k',
    label: 'K值',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'location_qj_1',
    label: '前起坐标1',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'node_mark_qj_1',
    label: '前起节点1',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'location_qj_2',
    label: '前起坐标2',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'node_mark_qj_2',
    label: '前起节点2',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'node_mark_qj_3',
    label: '前起节点3',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'location_qj_4',
    label: '前起坐标4',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'node_mark_qj_4',
    label: '前起节点4',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'culm_list_1',
    label: '左短舱坐标',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'node_mark1',
    label: '左短舱节点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'culm_list_2',
    label: '右短舱坐标',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'node_mark2',
    label: '右短舱节点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'culm_list_3',
    label: '左主起坐标',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'ode_mark_3',
    label: '左主起节点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'culm_list_4',
    label: '右主起坐标',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'node_mark_4',
    label: '右主起节点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'split_excle_file_2_0',
    label: '辅助拆分表格',
    value: '',
    field_type: 'upload'
  },
  {
    field_id: 'xunidian1',
    label: '平尾接入点',
    value: '',
    field_type: 'input'
  },
  {
    field_id: 'xunidian2',
    label: '垂尾接入点',
    value: '',
    field_type: 'input'
  }
]);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['on-sure']);
const currentItem = reactive({
  value: '',
  field_type: '',
  path: '',
  label: ''
});
const getPublicParameters = async (data) => {
  const obj = {
    loadType: data.loadType,
    stage: data.stage,
    version: data.version,
    pageNum: 1,
    pageSize: 99
  };
  const { rows } = await publicParameterList(obj);
  rows.forEach((item) => {
    const newObj = paramList.value.find((el) => el.field === item.parameterName);
    if (newObj) {
      newObj.value = item.value;
    }
  });
};
const getSpecificParameters = async (data) => {
  const obj = {
    loadcaseVersionId: data.loadcaseVersionId,
    pageNum: 1,
    pageSize: 99
  };
  const { rows } = await specificParameterList(obj);
  rows.forEach((item) => {
    const newObj = paramList.value.find((el) => el.field === item.parameterName);
    if (newObj) {
      newObj.value = item.value;
    }
  });
};
const setData = (obj) => {
  currentItem.field_type = obj.field_type;
  currentItem.label = obj.label;
  currentItem.path = obj.path;
  currentItem.value = obj.value;
  currentItem.field_id = obj.field_id;
};
const getParameterConfigPath = async (data) => {
  const obj = {
    task_id: data.version_id,
    analysis_type: data.analysis_type
  };
  const res = await asapGetParameterConfigPath(obj);
  console.log(res);
  paramList.value = res.data.filter((item) => item.field_id !== 'path' && item.field_id !== 'public_path');
};
const getParameter = async (data) => {
  const obj = {
    node_id_list: [String(taskInfo.value.task_id)],
    path: data.path,
    task_id: String(taskInfo.value.version_id)
  };
  const res = await asapGetParameter(obj);
  const datas = res.data[0];
  currentItem.value = datas.value;
};
const openDialog = async (data) => {
  dialogShow.value = true;
  loading.value = true;
  taskInfo.value = data;
  // await getPublicParameters(taskInfo.value.taskForm);
  // await getSpecificParameters(taskInfo.value.taskForm);
  await getParameterConfigPath(data);
  if (paramList.value.length) {
    setData(paramList.value[0]);
    await getParameter(currentItem);
  }

  loading.value = false;
};
const closeDialog = () => {
  dialogShow.value = false;
};
const handleClick = (item) => {
  setData(item);
  getParameter(item);
};
const handleSure = () => {};
defineExpose({
  openDialog
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  .block-left {
    width: 240px;
    border-right: 1px solid #eeeeee;
    .param-scrollbar {
      height: 400px;
      margin-right: 8px;
    }
    .param-item {
      line-height: 38px;
      cursor: pointer;
    }
    .active-item {
      background-color: #1890ff1a;
    }
    .param-item:hover {
      background-color: #1890ff1a;
    }
  }
  .block-right {
    width: calc(100% - 250px);
    margin-left: 12px;
    .input-block {
      display: inline-flex;
      align-items: center;
      .label {
        width: fit-content;
      }
    }
  }
  .value-block {
    overflow: hidden;
  }
}
</style>
